<template>
  <div class="container-fluid bj">
    <div class="container mb_40">
      <div class="mt_25">
        首页>
        <span class="color">新闻公告</span>
      </div>
      <div class="dis_f mt_20">
        <el-button plain class="orderbtn bj font_14" type="primary">全部类型</el-button>
        <el-button plain class="questionbtn bj font_14 ml_20" type="primary">消防最新咨询</el-button>
        <el-button plain class="questionbtn bj font_14 ml_20" type="primary">二级建造师</el-button>
        <el-button plain class="questionbtn bj font_14 ml_20" type="primary">健康管理师</el-button>
      </div>
      <div class="news_center">
        <div class="dis_f mlr_20 mt_30">
          <div>
            <div>
              <img src="../../static/image/newlist.png" width="463" height="263" />
            </div>
            <div class="mt_20">快来领取2000技能补贴！健康管理师赚疯了</div>
            <div class="mt_30 color_999">有了龙德，你还怕自己学不会吗？</div>
          </div>
          <!--  -->
          <div class="ml_40">
            <div>
              <img src="../../static/image/newlist.png" width="305" height="172" />
              <img
                src="../../static/image/newlist.png"
                width="305"
                height="172"
                class="ml_20"
              />
            </div>
            <div>
              <img src="../../static/image/newlist.png" width="305" height="172" />
              <img
                src="../../static/image/newlist.png"
                width="305"
                height="172"
                class="ml_20 mt_15"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="dis_f">
        <div>
          <div class="news_center_list">
            <div>
              <div class="mrl_230 dis_f">
                <div class="xian"></div>
                <div style="margin-left:8px;font_size:15px">最新文章</div>
                <div style="margin-left:10px;font_size:12px;color:#A1A3A8;">探索行业最新讯息</div>
              </div>
              <div class="mtb_30 dis_f border_b pb_26">
                <div>
                  <img src="../../static/image/newlist.png" width="178" height="100" />
                </div>
                <div class="ml_30">
                  <div class="color font_15">被点名的中级建筑师</div>
                  <div class="biao mt_10" style="font_size:12px ">中级建筑师</div>
                  <div class="color dis_f mt_43">
                    <div>
                      <i class="el-icon-view"></i>
                      <span style="margin-left:4px">2323</span>
                    </div>
                    <div>
                      <i class="el-icon-time ml_20"></i>
                      <span style="margin-left:4px">2323</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--  -->
            <div>
              <div class="mtb_30 dis_f border_b pb_26">
                <div>
                  <img src="../../static/image/newlist.png" width="178" height="100" />
                </div>
                <div class="ml_30">
                  <div class="color font_15">被点名的中级建筑师</div>
                  <div class="biao mt_10" style="font_size:12px ">中级建筑师</div>
                  <div class="color dis_f mt_43">
                    <div>
                      <i class="el-icon-view"></i>
                      <span style="margin-left:4px">2323</span>
                    </div>
                    <div>
                      <i class="el-icon-time ml_20"></i>
                      <span style="margin-left:4px">2323</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--  -->
            <div class="jiazai">加载更多</div>
          </div>
          
        </div>
        <div class="right_list mt_25">
          <div class="mrl_230 dis_f">
            <div class="xian"></div>
            <div style="margin-left:8px;font_size:15px">热门文章</div>
            <div style="margin-left:166px ;color:#A1A3A8; font_size:12px">全部</div>
          </div>
          <div class="color font_13 mrl_230">消防不难，贵在坚持！！！</div>
          <div class="color dis_f ml_30">
            <div>
              <i class="el-icon-view"></i>
              <span style="margin-left:4px">2323</span>
            </div>
            <div>
              <i class="el-icon-time ml_20"></i>
              <span style="margin-left:4px">2323</span>
            </div>
          </div>
          <!--  -->
          <div class="color_333 font_13 mrl_230">官方消息：加强护士+健康管理师人才培养已...</div>
          <div class="color_B4B4B4 dis_f ml_30">
            <div>
              <i class="el-icon-view"></i>
              <span style="margin-left:4px">2323</span>
            </div>
            <div>
              <i class="el-icon-time ml_20"></i>
              <span style="margin-left:4px">2323</span>
            </div>
          </div>
          <!--  -->
          <!--  -->
          <div class="color_333 font_13 mrl_230">官方消息：加强护士+健康管理师人才培养已...</div>
          <div class="color_B4B4B4 dis_f ml_30">
            <div>
              <i class="el-icon-view"></i>
              <span style="margin-left:4px">2323</span>
            </div>
            <div>
              <i class="el-icon-time ml_20"></i>
              <span style="margin-left:4px">2323</span>
            </div>
          </div>
          <!--  -->
          <!--  -->
          <div class="color_333 font_13 mrl_230">官方消息：加强护士+健康管理师人才培养已...</div>
          <div class="color_B4B4B4 dis_f ml_30">
            <div>
              <i class="el-icon-view"></i>
              <span style="margin-left:4px">2323</span>
            </div>
            <div>
              <i class="el-icon-time ml_20"></i>
              <span style="margin-left:4px">2323</span>
            </div>
          </div>
          <!--  -->
          <!--  -->
          <div class="color_333 font_13 mrl_230">官方消息：加强护士+健康管理师人才培养已...</div>
          <div class="color_B4B4B4 dis_f ml_30">
            <div>
              <i class="el-icon-view"></i>
              <span style="margin-left:4px">2323</span>
            </div>
            <div>
              <i class="el-icon-time ml_20"></i>
              <span style="margin-left:4px">2323</span>
            </div>
          </div>
          <!--  -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style scoped lang='less'>
.mb_40{
margin-bottom: 40px;
}
.jiazai{
width:95px;
height:34px;
background:rgba(39,164,254,1);
font-size:14px;
color:rgba(254,255,255,1);
text-align: center;
line-height: 34px;
margin: auto;

}
.mt_10 {
  margin-top: 10px;
}
.mt_43 {
  margin-top: 35px;
}
.pb_26 {
  padding-bottom: 26px;
}
.biao {
  width: 80px;
  height: 20px;
  background: rgba(39, 164, 254, 1);
  border-radius: 2px;
  line-height: 20px;
  color: #fff;
  text-align: center;
}
.mtb_30 {
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
}
.news_center_list {
  width: 868px;
  margin-right: 29px;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px;
}
.ml_10 {
  margin-left: 10px;
}
.ml_40 {
  margin-left: 67px;
}
.mt_15 {
  margin-top: 15px;
}
.mlr_20 {
  margin-left: 20px;
  margin-right: 20px;
}
.el-button--primary.is-plain {
  border: 1px solid #c1c1c1;
  color: #666666;
}
.mt_20 {
  margin-top: 20px;
}
.color_333 {
  color: #333;
}
.color_B4B4B4 {
  color: #b4b4b4;
}
.ml_30 {
  margin-left: 25px;
  margin-top: 5px;
}
.font_13 {
  font-size: 13px;
}
.mrl_230 {
  margin-left: 22px;
  margin-top: 30px;
}
.xian {
  width: 2px;
  height: 22px;
  background: #27a4fe;
}
.right_list {
  width: 300px;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
  padding-bottom: 30px;
}
// -----
.pb_30 {
  padding-bottom: 30px;
}
.border_b {
  width: 830px;

  border-bottom: 1px solid rgba(144, 147, 153, 0.15);
}
.color_999 {
  color: #999;
}
.news_center {
  height: 360px;
  padding-bottom: 74px;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 20px;
}
.news_center_list {

  padding-bottom: 24px;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 20px;
}
.color {
  color: #27a4fe;
}
.mt_25 {
  margin-top: 25px;
}
.ml_20 {
  margin-left: 20px;
}
.newstitle {
  color: #333;
  font-size: 30px;
}
.font_18 {
  font-size: 18px;
}
.ml_10 {
  margin-left: 10px;
}
.bj {
  background: #f3f3f3;
  overflow: hidden;
}
.mt_30 {
  margin-top: 30px;
}
.mlr_30 {
  padding: 0 30px;
}
.dis_f {
  display: flex;
}
.mt_38 {
  margin-top: 38px;
}
</style>